<div id="{{config.name}}" class="dynamic-field form-select" [formGroup]="group" [ngClass]="fieldShow" [class.has-tooltip]="config.tooltip" *ngIf="!config['isHidden']" 
  ix-auto ix-auto-type="scheduler" ix-auto-identifier="{{config.placeholder}}">
    <mat-form-field class="full-width" matTooltip="{{currentValue}}" matTooltipPosition="above" [ngClass]="{'overlay-opened': isOpen}">
    <mat-select [formControlName]="config.name" [required]="config.required" [placeholder]="config.placeholder | translate" (change)="onChangeOption($event)">
      <mat-option *ngFor="let preset of presets" [value]="preset.value">
        {{ preset.label }} <em class="crontab">({{preset.value}})</em>
        <span class="text-small preset-description" *ngIf="preset.description"> {{preset.description}}</span>
      </mat-option>
      <mat-option #trigger="cdkOverlayOrigin" cdkOverlayOrigin (click)="togglePopup()" [value]="crontab">
        Custom <em class="crontab">({{crontab}})</em>
      </mat-option>
      </mat-select>
    </mat-form-field>
    <tooltip *ngIf="config.tooltip" [header]="config.placeholder" [message]="config.tooltip"></tooltip>
    <div class="margin-for-error">
      <form-errors [control]="group.controls[config.name]" [config]="config"></form-errors>
      <mat-error *ngIf="config['hasErrors']">{{config['errors']}}</mat-error>
    </div>

    <ng-template (backdropClick)="backdropClicked($event)"
      cdkConnectedOverlay
      [cdkConnectedOverlayOrigin]="trigger"
      [cdkConnectedOverlayOpen]="isOpen">
      <mat-card  class="mat-card advanced-date-picker" role="dialog">
        <div class="mat-calendar-content">
          <h4 class="preview-label">{{"Schedule Preview" | translate}}
            <div class="controls">
              <button mat-icon-button [disabled]="disablePrevious" (click)="setCalendar('previous')">
                <mat-icon aria-label="Previous Month">keyboard_arrow_left</mat-icon>
              </button>
              <button mat-icon-button (click)="setCalendar('next')">
                <mat-icon aria-label="Next Month" >keyboard_arrow_right</mat-icon>
              </button>
            </div>
          </h4>
          <mat-divider></mat-divider>
          <div class="calendar-wrapper">
            <mat-month-view #calendar
              [activeDate]="activeDate">
            </mat-month-view>
          </div>
          <mat-divider id="spacer"></mat-divider>
          <ul class="schedule-list" #preview>
            <div class="text-small time-zone-label"><strong>{{"System Time Zone:" | translate}}</strong> {{timezone}}</div>
            <ng-container *ngFor="let date of generatedSchedule;">
              <li>{{ date | date: ngDateFormat:offset}} {{ offset }}</li>
            </ng-container>
          </ul>
        </div>

        <div class="cron-fields">

          <section style="text-align:left;">
            <h4 class="preview-label">{{"Presets" | translate}}</h4>
            <mat-form-field class="cron-presets">
              <mat-select placeholder="Choose a preset" [(ngModel)]="preset" [ngModelOptions]="{standalone: true}">
                <mat-option *ngFor="let preset of presets" [value]="preset">
                  {{ preset.label }}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </section>
          <mat-divider></mat-divider>

          <section style="text-align:left;" class="m-h-d">
            <div class="preview-label">
              <h4 class="preview-label"><span *ngIf="!config.noMinutes">Minutes/</span>Hours/Days</h4>
              <tooltip [header]="config.noMinutes ? helptext.scheduler.general.headerWithoutMinutes : helptext.scheduler.general.header" [message]="helptext.scheduler.general.tooltip"></tooltip>
            </div>
            <span id="no-spaces">{{"Separate values with commas, and without spaces." | translate}}</span>
            <!--<mat-form-field >
              <input matInput placeholder="Seconds">
              </mat-form-field>-->
              <mat-form-field *ngIf="!config.noMinutes">
                <input matInput [(ngModel)]="minutes" [ngModelOptions]="{standalone: true}" [value]="minutes" placeholder="Minutes" required [ngClass]=" {'invalid' : validMinutes === false}">
              </mat-form-field>
              <tooltip *ngIf="!config.noMinutes" [header]="helptext.scheduler.minutes.header" [message]="helptext.scheduler.minutes.tooltip"></tooltip>
              <mat-form-field>
                <input matInput [(ngModel)]="hours" [ngModelOptions]="{standalone: true}" [value]="hours" placeholder="Hours" required [ngClass]="{'invalid': validHours === false}">
              </mat-form-field>
              <tooltip [header]="helptext.scheduler.hours.header" [message]="helptext.scheduler.hours.tooltip"></tooltip>
              <br *ngIf="config.noMinutes"/>
              <mat-form-field>
                <input matInput [(ngModel)]="days" [ngModelOptions]="{standalone: true}" [value]="days" placeholder="Days" required [ngClass]="{'invalid': validDays === false}">
              </mat-form-field>
              <tooltip [header]="helptext.scheduler.days.header" [message]="helptext.scheduler.days.tooltip"></tooltip>
          </section>
          <mat-divider></mat-divider>

          <!-- Months-->
          <section>
            <h4 class="preview-label">{{"Months" | translate}}</h4>
            <table class="months jan-jun">
              <tbody>
                <tr>
                  <!--<td>All</td>-->
                  <td>{{"Jan" | translate}}</td>
                  <td>{{"Feb" | translate}}</td>
                  <td>{{"Mar" | translate}}</td>
                  <td>{{"Apr" | translate}}</td>
                  <td>{{"May" | translate}}</td>
                  <td>{{"Jun" | translate}}</td>
                </tr>
                <tr>
                  <!--<td><mat-checkbox class="month"></mat-checkbox></td>-->
                  <td><mat-checkbox [(ngModel)]="jan" [ngModelOptions]="{standalone: true}" [value]="jan" class="month"></mat-checkbox></td>
                  <td><mat-checkbox [(ngModel)]="feb" [ngModelOptions]="{standalone: true}" [value]="feb" class="month"></mat-checkbox></td>
                  <td><mat-checkbox [(ngModel)]="mar" [ngModelOptions]="{standalone: true}" [value]="mar" class="month"></mat-checkbox></td>
                  <td><mat-checkbox [(ngModel)]="apr" [ngModelOptions]="{standalone: true}" [value]="apr" class="month"></mat-checkbox></td>
                  <td><mat-checkbox [(ngModel)]="may" [ngModelOptions]="{standalone: true}" [value]="may" class="month"></mat-checkbox></td>
                  <td><mat-checkbox [(ngModel)]="jun" [ngModelOptions]="{standalone: true}" [value]="jun" class="month"></mat-checkbox></td>
                </tr>
              </tbody>
            </table>
            <table class="months jul-dec">
              <tbody>
                <tr>
                  <!--<td>All</td>-->
                  <td>{{"Jul" | translate}}</td>
                  <td>{{"Aug" | translate}}</td>
                  <td>{{"Sep" | translate}}</td>
                  <td>{{"Oct" | translate}}</td>
                  <td>{{"Nov" | translate}}</td>
                  <td>{{"Dec" | translate}}</td>
                </tr>
                <tr>
                  <!--<td><mat-checkbox class="month"></mat-checkbox></td>-->
                  <td><mat-checkbox [(ngModel)]="jul" [ngModelOptions]="{standalone: true}" [value]="jul" class="month"></mat-checkbox></td>
                  <td><mat-checkbox [(ngModel)]="aug" [ngModelOptions]="{standalone: true}" [value]="aug" class="month"></mat-checkbox></td>
                  <td><mat-checkbox [(ngModel)]="sep" [ngModelOptions]="{standalone: true}" [value]="sep" class="month"></mat-checkbox></td>
                  <td><mat-checkbox [(ngModel)]="oct" [ngModelOptions]="{standalone: true}" [value]="oct" class="month"></mat-checkbox></td>
                  <td><mat-checkbox [(ngModel)]="nov" [ngModelOptions]="{standalone: true}" [value]="nov" class="month"></mat-checkbox></td>
                  <td><mat-checkbox [(ngModel)]="dec" [ngModelOptions]="{standalone: true}" [value]="dec" class="month"></mat-checkbox></td>
                </tr>
              </tbody>
            </table>
          </section>

          <mat-divider></mat-divider>

          <!-- Days of Week-->
          <section>
            <h4 class="preview-label">{{"Days of Week" | translate}}</h4>
            <table class="days-of-week">
              <tbody>
                <tr>
                  <!--<td>All</td>-->
                  <td>{{"Sun" | translate}}</td>
                  <td>{{"Mon" | translate}}</td>
                  <td>{{"Tue" | translate}}</td>
                  <td>{{"Wed" | translate}}</td>
                  <td>{{"Thu" | translate}}</td>
                  <td>{{"Fri" | translate}}</td>
                  <td>{{"Sat" | translate}}</td>
                </tr>
                <tr>
                  <!--<td><mat-checkbox class="weekday"></mat-checkbox></td>-->
                  <td><mat-checkbox [(ngModel)]="sun" [ngModelOptions]="{standalone: true}" [value]="sun" class="weekday"></mat-checkbox></td>
                  <td><mat-checkbox [(ngModel)]="mon" [ngModelOptions]="{standalone: true}" [value]="mon" class="weekday"></mat-checkbox></td>
                  <td><mat-checkbox [(ngModel)]="tue" [ngModelOptions]="{standalone: true}" [value]="tue" class="weekday"></mat-checkbox></td>
                  <td><mat-checkbox [(ngModel)]="wed" [ngModelOptions]="{standalone: true}" [value]="wed" class="weekday"></mat-checkbox></td>
                  <td><mat-checkbox [(ngModel)]="thu" [ngModelOptions]="{standalone: true}" [value]="thu" class="weekday"></mat-checkbox></td>
                  <td><mat-checkbox [(ngModel)]="fri" [ngModelOptions]="{standalone: true}" [value]="fri" class="weekday"></mat-checkbox></td>
                  <td><mat-checkbox [(ngModel)]="sat" [ngModelOptions]="{standalone: true}" [value]="sat" class="weekday"></mat-checkbox></td>
                </tr>
              </tbody>
            </table>
          </section>

          <mat-divider></mat-divider>

          <button mat-button color="accent" (click)="onPopupSave()" [disabled]="validPopup()" style="margin:9px;">{{"Done" | translate}}</button>
        </div>
      </mat-card>
    </ng-template>
</div>


<!--</mat-form-field>-->
